import { useState,useEffect } from "react";

function Clock(){

    const [time,setTime] = useState(new Date())

    useEffect(() => {
        // 在组件加载或者更新时执行的效果
        const interval = setInterval(() => {
          // 创建一个定时器，每隔一秒执行一次回调函数
          setTime(new Date());
          // 使用 setTime 函数更新时间，这会触发组件重新渲染
        }, 1000);
        
        // 返回一个清理函数，在组件卸载或者更新时执行
        return () => {
          clearInterval(interval); // 清除定时器，避免内存泄漏
        };
      }, []); // 传入空数组作为第二个参数，表示只在组件加载时执行一次
      
    const formatTime = ()=>{
        let hours = time.getHours()
        const minutes = time.getMinutes()
        const seconds = time.getSeconds()
        const meridiem = hours > 12 ? "PM" : "AM"
        hours = hours % 12 || 12

        return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)} ${meridiem}`
    }

    const padZero = (num)=>{
        return (num < 10 ? "0" : "") + num
    }
    
    return(<div className="clock-container">
        <div className="clock">
            <span>{formatTime()}</span>
        </div>
    </div>)
}

export default Clock